<template>

     <ul class="vv" @click="fn">
        <li>
            <div class="nn"><img :src="merchImage"></div> 
            <p>{{merchName}}</p>
            <h2>{{merchPrice}}元</h2>
        </li>
    </ul>
    
   
</template>

<script>
    export default {
        props:["merchName","merchImage","merchPrice","merchId"],
        data() {
            return {
                id: this.merchId,
            }
        },
        methods: {
            fn(){
                this.$router.push({
                    name: "merch",
                    params: {
                        id: this.id
                    }
                })
            }
        },
    }
</script>

<style lang="scss" scoped>

    
         ul{
            width: 45vw;
            margin-left: 10px;
            display: flex;
            flex-wrap: wrap;
        li{
            padding-bottom: 3vw;
            width: 40%;
            flex-grow: 1;
            margin: 8px;
            p{
                padding-top: 1vw;
                text-align: left;
                font-size: 4vw;
                color: #000;
            }
           h2{
            text-align: left;
            font-size: 4vw;
            padding-top: 2vw;
            color: rgb(255, 0, 43);
           }
            img{
                width: 45vw;
                height: 45vw;
                
            }
        }

    }
    
</style>